<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:1.5rem;height:.625rem;" />
            <div class="title">
              <span class="title-text" style="font-size: 40px">水质检测工业云平台</span>
            </div>
            <dv-decoration-8 :reverse="true" :color="['#568aea', '#000000']" style="width:1.5rem;height:.625rem;"/>
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- layout -->
        <div class="d-flex px-5">
          <div class="d-flex" style="width: 26%">
            <div :class="['react-right', 'mr-4', tabi != 1? '' :'bg-color-blue' ]" style="width: 3.25rem">
              <span class="text fw-b" @click="go(1)">实时监测</span>
            </div>
            <div :class="['react-right', 'mr-4', tabi != 2? '' :'bg-color-blue' ]" style="width: 3.25rem">
              <span class="text fw-b"  @click="go(2)">生产分析</span>
            </div>
            <div :class="['react-right', 'mr-4', tabi != 3? '' :'bg-color-blue' ]" style="width: 3.25rem">
              <span class="text fw-b"  @click="go(3)">安全分析</span>
            </div>
          </div>
        </div>

        <div class="body-box" v-show="tabi==1">
          <!-- 第一行数据 -->
          <div class="top-box">
            <dv-border-box12>
              <onlineVideo/>
            </dv-border-box12>
            <!-- 中间 -->
            <dv-border-box12>
              <monitorMap/>
            </dv-border-box12>
            <!-- 中间 -->
            <dv-border-box12>
              <monitorStatics/>
            </dv-border-box12>
          </div>

          <!-- 第二行数据 -->
          <div class="content-box">
            <dv-border-box12>
              <detectionWarning />
            </dv-border-box12>
            <!-- 中间 -->
            <dv-border-box12>
              <waterQuality />
            </dv-border-box12>
            <!-- 中间 -->
            <dv-border-box13>
              <detectionPlot />
            </dv-border-box13>
            <dv-border-box13>
              <waterQualityStatics/>
            </dv-border-box13>
          </div>
        </div>

        <div class="body-box" v-show="tabi==2">
          生产分析
        </div>

        <div class="body-box" v-show="tabi==3">
          安全分析
        </div>

      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import detectionWarning from "@/views/detectionWarning.vue";
import waterQuality from "@/views/waterQuality.vue";
import detectionPlot from "@/views/detectionPlot.vue";
import monitorMap from "@/views/monitorMap.vue";
import onlineVideo from "@/views/onlineVideo.vue";
import monitorStatics from "@/views/monitorStatics.vue";
import waterQualityStatics from "@/views/waterQualityStatics.vue";
export default {
  data() {
    return {
      loading: true,
      tabi: 1,
    };
  },
  components: {
    onlineVideo,
    monitorMap,
    monitorStatics,
    waterQuality,
    detectionPlot,
    detectionWarning,
    waterQualityStatics,
  },
  mounted() {
    this.cancelLoading();
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    go(item) {
      this.tabi = item;
    }
  }
};
</script>

<style lang="scss">
.dataAllBorder01{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 1px;
  box-sizing: border-box;
}
.dataAllBorder02{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}


@import "../assets/scss/index.scss";
@import "../assets/scss/Security_operation.css";
</style>